.home {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-header {
  background-color: #5fb87800;
  color: #fff;
  height: 64px !important;

  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;

  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;

  .brand-logo {
    cursor: pointer;

    font-size: 2.1rem;

    span {
      font-size: 2rem;
    }
  }

  .nav-menu {
    display: flex;

    .nav-menu-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0 20px;
      height: 60px;

      .iconfont {
        margin-right: 5px;
      }
    }

    .nav-menu-item:hover {
      background-color: rgba(0, 0, 0, 0.103);
    }
  }

  .git {
    height: 64px;
    width: 64px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      // object-fit: contain;
    }
  }
}

.el-main {
  padding: 0;
}

.el-footer {
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dbdbdb;

  .footer-info {
    display: flex;
    width: 70%;
    justify-content: space-evenly;
    align-items: center;

    .f-info-text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .f-info-git {
      display: flex;
      font-size: 1.5rem !important;

      span {
        margin: 0 15px;
        font-size: 25px;
      }
    }
  }
}

.bg-color {
  background-image: linear-gradient(to right, #009688 0, #81c6a4 100%);
  opacity: 0.7;
}
